<template>
	<div class="app-container">
		<el-card style="margin-bottom: 20px">
			<div slot="header" style="font-weight: bold">基础设置</div>
			<el-form :model="baseForm" label-width="120px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="账户余额">
							<el-radio-group v-model="baseForm.balance">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="任务完成总数">
							<el-radio-group v-model="baseForm.taskCount">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="收款码">
							<el-radio-group v-model="baseForm.payCode">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="提现申请">
							<el-radio-group v-model="baseForm.withdraw">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="邀请好友">
							<el-radio-group v-model="baseForm.invite">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="我的团队">
							<el-radio-group v-model="baseForm.team">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="我的任务">
							<el-radio-group v-model="baseForm.myTask">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="首页弹框">
							<el-radio-group v-model="baseForm.logoTk">
								<el-radio :label="'show'">显示</el-radio>
								<el-radio :label="'hide'">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card style="margin-bottom: 20px">
			<div slot="header" style="font-weight: bold">广告设置</div>
			<el-form :model="adForm" label-width="120px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="首页位置">
							<ImageUpload v-model="adForm.home" :limit="1" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="个人中心位置">
							<ImageUpload v-model="adForm.center" :limit="1" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="提现申请位置">
							<ImageUpload v-model="adForm.withdraw" :limit="1" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card style="margin-bottom: 20px">
			<div slot="header" style="font-weight: bold">团队奖励设置</div>
			<el-form :model="rewardForm" label-width="120px">
				<el-form-item label="奖励金额">
					<el-input v-model="rewardForm.amount" style="width: 200px" />
				</el-form-item>
			</el-form>
		</el-card>
		<div style="text-align: center; margin-top: 30px">
			<el-button type="primary" @click="handleSave">保存</el-button>
			<el-button @click="handleCancel">取消</el-button>
		</div>
	</div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload';
import request from '@/utils/request';

export default {
	name: 'Base',
	components: { ImageUpload },
	data() {
		return {
			baseForm: {
				balance: 'hide',
				taskCount: 'hide',
				payCode: 'hide',
				withdraw: 'hide',
				invite: 'hide',
				team: 'hide',
				myTask: 'hide',
				logoTk: 'hide'
			},
			adForm: {
				home: '',
				center: '',
				withdraw: ''
			},
			rewardForm: {
				amount: ''
			}
		};
	},
	created() {
		this.getConfig();
	},
	methods: {
		async getConfig() {
			try {
				const res = await request({ url: '/system/taskConfig/getInfo', method: 'get' });
				const d = res.data || {};
				// 1=显示 0=隐藏
				this.baseForm.balance = d.showAccountBalance === 1 ? 'show' : 'hide';
				this.baseForm.taskCount = d.showTaskCompletionCount === 1 ? 'show' : 'hide';
				this.baseForm.payCode = d.showPaymentCode === 1 ? 'show' : 'hide';
				this.baseForm.withdraw = d.showWithdrawalApplication === 1 ? 'show' : 'hide';
				this.baseForm.invite = d.showInviteFriends === 1 ? 'show' : 'hide';
				this.baseForm.team = d.showMyTeam === 1 ? 'show' : 'hide';
				this.baseForm.myTask = d.showMyTasks === 1 ? 'show' : 'hide';
				this.baseForm.logoTk = d.logoTk === 1 ? 'show' : 'hide';
				this.adForm.home = d.homePagePosition || '';
				this.adForm.center = d.personalCenterPosition || '';
				this.adForm.withdraw = d.withdrawalApplicationPosition || '';
				this.rewardForm.amount = d.rewardAmount || '';
			} catch (e) {
				this.$message.error('获取基础设置失败');
			}
		},
		async handleSave() {
			// 组装参数
			const params = {
				showAccountBalance: this.baseForm.balance === 'show' ? 1 : 0,
				showTaskCompletionCount: this.baseForm.taskCount === 'show' ? 1 : 0,
				showPaymentCode: this.baseForm.payCode === 'show' ? 1 : 0,
				showWithdrawalApplication: this.baseForm.withdraw === 'show' ? 1 : 0,
				showInviteFriends: this.baseForm.invite === 'show' ? 1 : 0,
				showMyTeam: this.baseForm.team === 'show' ? 1 : 0,
				showMyTasks: this.baseForm.myTask === 'show' ? 1 : 0,
				logoTk: this.baseForm.logoTk === 'show' ? 1 : 0,
				homePagePosition: this.adForm.home,
				personalCenterPosition: this.adForm.center,
				withdrawalApplicationPosition: this.adForm.withdraw,
				rewardAmount: this.rewardForm.amount
			};
			try {
				await request({ url: '/system/taskConfig/editInfo', method: 'post', data: params });
				this.$message.success('保存成功');
				this.getConfig();
			} catch (e) {
				this.$message.error('保存失败');
			}
		},
		handleCancel() {
			this.getConfig();
			this.$message.info('已取消，数据已重置');
		}
	}
};
</script>

<style scoped>
.app-container {
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e4e7ed;
}
</style>
